<!DOCTYPE html>
<html style="font-size: 14.61268px;">

	<head>
		<meta charset="UTF-8">
		<title>common示例</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common_demo.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>

	<body>
		<section class="demo_container">

			<!----------------------------common示例n start---------------------------->
			<!--						
			<section class="demo_section">
				<h2 class="demo_module">模块/组件 名称</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
							-----css代码-----
						</pre>

						<p class="demo_title">html结构</p>
						<pre>
							-----html代码-----
						</pre>

						<p class="demo_title">js脚本</p>
						<pre>
							-----js代码-----
						</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe">
							-----需要运行的html代码-----
						</div>
					</div>
				</div>
			</section>
-->
			<!----------------------------common示例n end---------------------------->

			<!----------------------------适配与布局 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">适配与布局</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">说明</p>
						<pre>
1. 全页面字体使用rem单位设置
2. 由于各大移动设备屏幕比例和一些页面特殊需求，全页面容器使用高度适配
	a. 垂直方向的，如：height, line-height, top, bottom, margin-top, margin-bottom, padding-top, padding-bottom 使用 _config.scss里 的函数 setLengthByHeight() 设置
	b. 水平方向的则使用其它自适应方案设置</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<p>无</p>
					</div>
				</div>
			</section>

			<!----------------------------适配与布局 end---------------------------->

			<!----------------------------顶栏示例 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">顶栏</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/conmmon.css"/&gt;</pre>

						<p class="demo_title">html结构</p>
						<pre>
&lt;header class="topbar"&gt;
	<span class="demo_note">&lt;!--左侧操作区--&gt;</span>
	&lt;div class="left"&gt;
		&lt;a href=""&gt;店铺&lt;/a&gt;
		<span class="demo_note">&lt;!--返回--&gt;</span>
		<span class="demo_note">&lt;!--&lt;a class="iconfont icon-arrowleft" href="javascript:history.back()"&gt;&lt;/a&gt;--&gt;</span>
		<span class="demo_note">&lt;!--关闭--&gt;</span>
		<span class="demo_note">&lt;!--&lt;a class="iconfont icon-cuowu" href="javascript:history.go(-2)"&gt;&lt;/a&gt;--&gt;</span>
	&lt;/div&gt;
	
	<span class="demo_note">&lt;!--标题--&gt;</span>
	&lt;div class="title"&gt;Infoscape&lt;/div&gt;
	
	<span class="demo_note">&lt;!--右侧操作区--&gt;</span>
	&lt;div class="right"&gt;
		&lt;a href=""&gt;推广&lt;/a&gt;
	&lt;/div&gt;
&lt;/header&gt;</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe">

							<header class="topbar">
								<div class="left">
									<a href="">店铺</a>
								</div>
								<div class="title">Infoscape</div>
								<div class="right">
									<a href="">推广</a>
								</div>
							</header>

						</div>
					</div>
				</div>
			</section>

			<!----------------------------顶栏示例 end---------------------------->

			<!----------------------------内容区 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">内容区</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/conmmon.css"/&gt;</pre>

						<p class="demo_title">html结构</p>
						<pre>
&lt;section class="main"&gt;
	balabalabala~~
&lt;/section&gt;</pre>

						<p class="demo_title">说明</p>
						<pre>
<span class="demo_note">&lt;!--部分页面不需要底栏，则再叠加 .full 类即可，如：--&gt;</span>
&lt;section class="main full"&gt;
	balabalabala~~
&lt;/section&gt;</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe">
							<section class="main">
								balabalabala~~
							</section>
						</div>
					</div>
				</div>
			</section>

			<!----------------------------内容区 end---------------------------->

			<!----------------------------底栏示例 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">底栏</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/conmmon.css"/&gt;</pre>

						<p class="demo_title">html结构</p>
						<pre>
&lt;nav class="btmbar"&gt;
	&lt;a class="item active" href=""&gt;
		&lt;i class="iconfont icon-xiaodian"&gt;&lt;/i&gt;
		&lt;p&gt;小店&lt;/p&gt;
	&lt;/a&gt;
	&lt;a class="item" href=""&gt;
		&lt;i class="iconfont icon-shichang"&gt;&lt;/i&gt;
		&lt;p&gt;市场&lt;/p&gt;
	&lt;/a&gt;
	&lt;a class="item" href=""&gt;
		&lt;i class="iconfont icon-gouwuche"&gt;
			&lt;em&gt;9&lt;/em&gt;
		&lt;/i&gt;
		&lt;p&gt;购物车&lt;/p&gt;
	&lt;/a&gt;
	&lt;a class="item" href=""&gt;
		&lt;i class="iconfont icon-weibiaoti4"&gt;&lt;/i&gt;
		&lt;p&gt;我的&lt;/p&gt;
	&lt;/a&gt;
&lt;/nav&gt;</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe">

							<nav class="btmbar">
								<a class="item active" href="">
									<i class="iconfont icon-xiaodian"></i>
									<p>小店</p>
								</a>
								<a class="item" href="">
									<i class="iconfont icon-shichang"></i>
									<p>市场</p>
								</a>
								<a class="item" href="">
									<i class="iconfont icon-gouwuche">
										<em>9</em>
									</i>
									<p>购物车</p>
								</a>
								<a class="item" href="">
									<i class="iconfont icon-weibiaoti4"></i>
									<p>我的</p>
								</a>
							</nav>

						</div>
					</div>
				</div>
			</section>

			<!----------------------------底栏示例 end---------------------------->

			<!----------------------------弹出层 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">弹出层</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/conmmon.css"/&gt;</pre>

						<p class="demo_title">html结构</p>
						<pre>
<span class="demo_note">&lt;!--弹出层入口：在元素上添加 data-ent="弹出层会话框id"即可--&gt;</span>
&lt;a data-ent="demo_icon_list" href=""&gt;点击打开弹出层-icon列表&lt;/a&gt;&lt;br /&gt;
&lt;a data-ent="demo_text_list" href=""&gt;点击打开弹出层-文本列表&lt;/a&gt;

<span class="demo_note">&lt;!--弹出层：弹出层只有一个，里面可以包含多个会话框--&gt;</span>
&lt;section class="layer"&gt;
	<span class="demo_note">&lt;!--会话框，必须填写id才能被调出来，.dialog类 是位于下方的会话框样式，其它位置的样式后续添加--&gt;</span>

	<span class="demo_note">&lt;!--会话框1--&gt;</span>
	&lt;div id="demo_icon_list" class="dialog"&gt;
		<span class="demo_note">&lt;!--icon列表--&gt;</span>
		&lt;div class="icon_list"&gt;
			&lt;a class="item" href=""&gt;
				&lt;i class="iconfont icon-QQ"&gt;&lt;/i&gt;
				&lt;p&gt;QQ&lt;/p&gt;
			&lt;/a&gt;
			&lt;a class="item" href=""&gt;
				&lt;i class="iconfont icon-weixin"&gt;&lt;/i&gt;
				&lt;p&gt;微信&lt;/p&gt;
			&lt;/a&gt;
			&lt;a class="item" href=""&gt;
				&lt;i class="iconfont icon-pengyouquan"&gt;&lt;/i&gt;
				&lt;p&gt;朋友圈&lt;/p&gt;
			&lt;/a&gt;
		&lt;/div&gt;
		<span class="demo_note">&lt;!--取消（关闭弹出层）--&gt;</span>
		&lt;a class="cancel" data-action="close" href=""&gt;取消&lt;/a&gt;
	&lt;/div&gt;

	<span class="demo_note">&lt;!--会话框2--&gt;</span>
	&lt;div id="demo_text_list" class="dialog"&gt;
		<span class="demo_note">&lt;!--文本列表--&gt;</span>
		&lt;div class="text_list"&gt;
			&lt;a class="item" href=""&gt;链接1&lt;/a&gt;
			&lt;a class="item" href=""&gt;链接2&lt;/a&gt;
			&lt;a class="item" href=""&gt;链接3&lt;/a&gt;
		&lt;/div&gt;
		<span class="demo_note">&lt;!--取消（关闭弹出层）--&gt;</span>
		&lt;a class="cancel" data-action="close" href=""&gt;取消&lt;/a&gt;
	&lt;/div&gt;
&lt;/section&gt;</pre>

						<p class="demo_title">js脚本</p>
						<pre>
&lt;script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"&gt;&lt;"/script&gt;
&lt;script src="js/layer.js" type="text/javascript" charset="utf-8"&gt;&lt;"/script&gt;</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe demo_layer">

							<a data-ent="demo_icon_list" href="">点击打开弹出层-icon列表</a><br />
							<a data-ent="demo_text_list" href="">点击打开弹出层-文本列表</a>

							<section class="layer">
								<div id="demo_icon_list" class="dialog">
									<div class="icon_list">
										<a class="item" href="">
											<i class="iconfont icon-QQ"></i>
											<p>QQ</p>
										</a>
										<a class="item" href="">
											<i class="iconfont icon-weixin"></i>
											<p>微信</p>
										</a>
										<a class="item" href="">
											<i class="iconfont icon-pengyouquan"></i>
											<p>朋友圈</p>
										</a>
									</div>
									<a class="cancel" data-action="close" href="">取消</a>
								</div>

								<div id="demo_text_list" class="dialog">
									<div class="text_list inner">
										<a class="item" href="">链接1</a>
										<a class="item" href="">链接2</a>
										<a class="item" href="">链接3</a>
									</div>
									<a class="cancel" data-action="close" href="">取消</a>
								</div>
							</section>

						</div>
					</div>
				</div>
			</section>

			<!----------------------------弹出层 end---------------------------->

			<!----------------------------按钮类 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">按钮类</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/conmmon.css"/&gt;</pre>

						<p class="demo_title">html结构</p>
						<pre>
&lt;a class="btn" href=""&gt;按钮1&lt;/a&gt;
&lt;a class="btn white" href=""&gt;按钮2&lt;/a&gt;
&lt;a class="btn lightgray" href=""&gt;按钮3&lt;/a&gt;
&lt;a class="btn w_210" href=""&gt;按钮4&lt;/a&gt;
&lt;input type="button" class="btn h_70" value="按钮5" /&gt;
&lt;input type="button" class="btn w_210 h_210 r_30" value="按钮6" /&gt;
&lt;input type="button" class="btn nopd" value="按钮7" /&gt;</pre>

						<p class="demo_title">说明</p>
						<pre>
common.css文件 按钮类 命名规则：
1. 控制颜色的类直接使用颜色的英文
2. 控制宽度的类使用 w_数字 表示
3. 控制高度的类使用 h_数字 表示
4. 控制圆角的类使用 r_数字 表示
5. 控制无padding使用 nopd 表示</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe">
							<a class="btn" href="">按钮1</a>
							<a class="btn white" href="">按钮2</a>
							<a class="btn lightgray" href="">按钮3</a>
							<a class="btn w_210" href="">按钮4</a>
							<input type="button" class="btn h_70" value="按钮5" />
							<input type="button" class="btn w_210 h_210 r_30" value="按钮6" />
							<input type="button" class="btn nopd" value="按钮7" />
						</div>
					</div>
				</div>
			</section>

			<!----------------------------按钮类 end---------------------------->

			<!----------------------------内容块 start---------------------------->

			<section class="demo_section">
				<h2 class="demo_module">内容块</h2>
				<div class="demo_content">
					<div class="demo_code">
						<p class="demo_title">css样式</p>
						<pre>
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/conmmon.css"/&gt;</pre>

						<p class="demo_title">html结构</p>
						<pre>
<span class="demo_note">&lt;!--
	【内容块】
	.piece			：内容块类
	.piece.no_mtop	： 内容块叠加类（无顶部外间距）
	.piece.p_left		：内容块叠加类（带左侧内间距）
	.piece.empty		：内容块叠加类（仅包含上下外间距，无其它样式）
--&gt;</span>

<span class="demo_note">&lt;!--
	【内容块子元素】
	a.link			：链接类
	a.link.emphasize	：链接叠加类（内容突出）
	.explain			：说明信息类
	.explain .item		：说明信息项类
--&gt;</span>

<span class="demo_note">&lt;!--内容块1--&gt;</span>
&lt;section class="piece no_mtop"&gt;
	&lt;a class="link" href=""&gt;
		&lt;p&gt;标签描述1&lt;/p&gt;
		&lt;span&gt;内容&lt;/span&gt;
		&lt;i class="iconfont icon-arrowright"&gt;&lt;/i&gt;
	&lt;/a&gt;
	&lt;a class="link" href=""&gt;
		&lt;p&gt;标签描述2&lt;/p&gt;
		&lt;span&gt;内容&lt;/span&gt;
		&lt;i class="iconfont icon-arrowright"&gt;&lt;/i&gt;
	&lt;/a&gt;
&lt;/section&gt;

<span class="demo_note">&lt;!--内容块2--&gt;</span>
&lt;section class="piece p_left"&gt;
	&lt;a class="link" href=""&gt;
		&lt;p&gt;标签描述3&lt;/p&gt;
		&lt;span&gt;内容&lt;/span&gt;
		&lt;i class="iconfont icon-arrowright"&gt;&lt;/i&gt;
	&lt;/a&gt;
	&lt;a class="link" href=""&gt;
		&lt;p&gt;标签描述4&lt;/p&gt;
		&lt;span&gt;内容&lt;/span&gt;
		&lt;i class="iconfont icon-arrowright"&gt;&lt;/i&gt;
	&lt;/a&gt;
&lt;/section&gt;

<span class="demo_note">&lt;!--内容块3--&gt;</span>
&lt;section class="piece p_left"&gt;
	&lt;a class="link emphasize" href=""&gt;
		&lt;p&gt;标签描述5&lt;/p&gt;
		&lt;p&gt;描述&lt;em&gt;突出内容&lt;/em&gt;描述&lt;/p&gt;
		&lt;span&gt;操作描述&lt;/span&gt;
		&lt;i class="iconfont icon-arrowright"&gt;&lt;/i&gt;
	&lt;/a&gt;
	&lt;a class="link" href=""&gt;
		&lt;p&gt;标签描述6&lt;/p&gt;
		&lt;span&gt;内容&lt;/span&gt;
		&lt;i class="iconfont icon-arrowright"&gt;&lt;/i&gt;
	&lt;/a&gt;
&lt;/section&gt;

<span class="demo_note">&lt;!--内容块4--&gt;</span>
&lt;section class="piece empty"&gt;
	&lt;ul class="explain"&gt;
		&lt;li class="item"&gt;
			&lt;p&gt;说明文本描述&lt;/p&gt;
		&lt;/li&gt;
		&lt;li class="item"&gt;
			&lt;a href=""&gt;链接1&lt;/a&gt;
			&lt;a href=""&gt;链接2&lt;/a&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/section&gt;</pre>
					</div>
					<div class="demo_show">
						<p class="demo_title">示例</p>
						<div class="demo_iframe">
							
							<section class="piece no_mtop">
								<a class="link" href="">
									<p>标签描述1</p>
									<span>内容</span>
									<i class="iconfont icon-arrowright"></i>
								</a>
								<a class="link" href="">
									<p>标签描述2</p>
									<span>内容</span>
									<i class="iconfont icon-arrowright"></i>
								</a>
							</section>
							
							<section class="piece p_left">
								<a class="link" href="">
									<p>标签描述3</p>
									<span>内容</span>
									<i class="iconfont icon-arrowright"></i>
								</a>
								<a class="link" href="">
									<p>标签描述4</p>
									<span>内容</span>
									<i class="iconfont icon-arrowright"></i>
								</a>
							</section>
							
							<section class="piece p_left">
								<a class="link emphasize" href="">
									<p>标签描述5</p>
									<p>描述<em>突出内容</em>描述</p>
									<span>操作描述</span>
									<i class="iconfont icon-arrowright"></i>
								</a>
								<a class="link" href="">
									<p>标签描述6</p>
									<span>内容</span>
									<i class="iconfont icon-arrowright"></i>
								</a>
							</section>
							
							<section class="piece empty">
								<ul class="explain">
									<li class="item">
										<p>说明文本描述</p>
									</li>
									<li class="item">
										<a href="">链接1</a>
										<a href="">链接2</a>
									</li>
								</ul>
							</section>
							
						</div>
					</div>
				</div>
			</section>

			<!----------------------------内容块 end---------------------------->

		</section>

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>